<template>
  <div class="contact-information base">
    <!--填资进度条-->
    <nav-bar :position="'contact'" :status="status"/>
    <div v-show="false">
      <doFaceButton ref="checkFaceInfo" />
    </div>
    <div ref="contactForm">
      <div class="title">{{ $t('contact') }} 1</div>
      <div class="form">
        <div class="form-group">
          <label>{{ $t('relationship') }}</label>
          <input v-model="form.relationshipFirst" @click="showRelationship('1')" :disabled="readonly" type="text"
            :placeholder="$t('plsChooseRelationship')" readonly class="input-select val" />
        </div>
        <div class="form-group">
          <label>{{ $t('contact') }}</label>
          <div v-if="isAndriod7" class="val" :class="{ 'contactbox': true }">
            <div class="input-info">
              <input type="text" placeholder='name' ref="contactFirst" v-model.trim="form.contactFirst" :disabled="readonly">
              <input type="text" placeholder="phone" @blur="phoneCheckInput($event, '1')" maxlength="11"
                ref="phoneFirst" v-model.trim="form.phoneFirst" :disabled="readonly">
            </div>
          </div>
          <div v-else @click="chooseContact($event, '1')" class="val bg"
            :class="{ 'contactbox': true, 'contactboxDisabled': readonly }">
            <p v-if="!form.contactFirst && !form.phoneFirst" class="placeholder">{{ $t('plsChoosContact') }}</p>
            <div v-else class="info">
              <span>{{ form.contactFirst }}</span>
              <span>{{ form.phoneFirst }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="title">{{ $t('contact') }} 2</div>
      <div class="form">
        <div class="form-group">
          <label>{{ $t('relationship') }}</label>
          <input v-model="form.relationshipSecond" @click="showRelationship('2')" :disabled="readonly" type="text"
            :placeholder="$t('plsChooseRelationship')" readonly class="input-select val" />
        </div>
        <div class="form-group">
          <label>{{ $t('contact') }}</label>
          <div v-if="isAndriod7" class="val" :class="{ 'contactbox': true }">
            <div class="input-info">
              <input type="text" placeholder='name' ref="contactSecond" v-model.trim="form.contactSecond"
                :disabled="readonly">
              <input type="text" placeholder="phone" @blur="phoneCheckInput($event, '2')" maxlength="11"
                ref="phoneSecond" v-model.trim="form.phoneSecond" :disabled="readonly">
            </div>
          </div>
          <div v-else @click="chooseContact($event, '2')" class="val bg"
            :class="{ 'contactbox': true, 'contactboxDisabled': readonly }">
            <p v-if="!form.contactSecond && !form.phoneSecond" class="placeholder">{{ $t('plsChoosContact') }}</p>
            <div v-else class="info">
              <span>{{ form.contactSecond }}</span>
              <span>{{ form.phoneSecond }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="title">{{ $t('contact') }} 3</div>
    <div class="form">
      <div class="form-group">
        <label>{{ $t('relationship') }}</label>
        <input v-model="form.relationshipThree" @click="showRelationship('3')" :disabled="readonly" type="text"
          :placeholder="$t('plsChooseRelationship')" readonly class="input-select val" />
      </div>
      <div class="form-group">
        <label>{{ $t('contact') }}</label>

        <div v-if="isAndriod7" class="val" :class="{ 'contactbox': true }">
          <div class="input-info">
            <input type="text" placeholder='name' ref="contactThree" v-model.trim="form.contactThree" :disabled="readonly">
            <input type="text" placeholder="phone" @blur="phoneCheckInput($event, '3')" maxlength="11" ref="phoneThree"
              v-model.trim="form.phoneThree" :disabled="readonly">
          </div>
        </div>
        <div v-else @click="chooseContact($event, '3')" class="val bg"
          :class="{ 'contactbox': true, 'contactboxDisabled': readonly }">
          <p v-if="!form.contactThree && !form.phoneThree" class="placeholder">{{ $t('plsChoosContact') }}</p>
          <div v-else class="info">
            <span>{{ form.contactThree }}</span>
            <span>{{ form.phoneThree }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="title">{{ $t('contact') }} 4<span>({{ $t('optional') }})</span></div>
    <div class="form">
      <div class="form-group">
        <label>{{ $t('relationship') }}</label>
        <input v-model="form.relationshipFour" @click="showRelationship('4')" :disabled="readonly" type="text"
          :placeholder="$t('plsChooseRelationship')" readonly class="input-select val" />
      </div>
      <div class="form-group">
        <label>{{ $t('contact') }}</label>
        <div v-if="isAndriod7" @click="chooseContact($event, '4')" class="val" :class="{ 'contactbox': true }">
          <div class="input-info">
            <input type="text" placeholder='name' ref="contactFour" v-model="form.contactFour" :disabled="readonly">
            <input type="text" placeholder="phone" @blur="phoneCheckInput($event, '4')" maxlength="11" ref="phoneFour"
              v-model="form.phoneFour" :disabled="readonly">
          </div>
        </div>
        <div v-else @click="chooseContact($event, '4')" class="val bg"
          :class="{ 'contactbox': true, 'contactboxDisabled': readonly }">
          <p v-if="!form.contactFour && !form.phoneFour" class="placeholder">{{ $t('plsChoosContact') }}</p>
          <div v-else class="info">
            <span>{{ form.contactFour }}</span>
            <span>{{ form.phoneFour }}</span>
          </div>
        </div>
      </div>
    </div> -->

    <!-- <div class="title">{{ $t('contact') }} 5 <span>({{ $t('optional') }})</span></div>
    <div class="form">
      <div class="form-group">
        <label>{{ $t('relationship') }}</label>
        <input v-model="form.relationshipFive" @click="showRelationship('5')" :disabled="readonly" type="text"
          :placeholder="$t('plsChooseRelationship')" readonly class="input-select val" />
      </div>
      <div class="form-group">
        <label>{{ $t('contact') }}</label>
        <div v-if="isAndriod7" class="val" @click="chooseContact($event, '5')" :class="{ 'contactbox': true }">
          <div class="input-info">
            <input type="text" placeholder='name' ref="contactFive" v-model="form.contactFive" :disabled="readonly">
            <input type="text" placeholder="phone" @blur="phoneCheckInput($event, '5')" maxlength="11" ref="phoneFive"
              v-model="form.phoneFive" :disabled="readonly">
          </div>
        </div>
        <div v-else @click="chooseContact($event, '5')" class="val bg"
          :class="{ 'contactbox': true, 'contactboxDisabled': readonly }">
          <p v-if="!form.contactFive && !form.phoneFive" class="placeholder">{{ $t('plsChoosContact') }}</p>
          <div v-else class="info">
            <span>{{ form.contactFive }}</span>
            <span>{{ form.phoneFive }}</span>
          </div>
        </div>
        <div>
        </div>
      </div>
    </div> -->
    <div class="btn-box">
      <!--      <button @click="submitHandler" :disabled="btnCanSubmit || disabledBtn || readonly" class="submitBtn btn-ui">{{ btnName }}</button>-->
      <button @click="submitHandler" class="submitBtn btn-ui" :disabled="btnCanSubmit || disabledBtn || readonly"
        :class="{ 'isSave': $route.query.btnType === 'save' }">{{ btnName }}</button>
    </div>

    <!--关系选择框     
      :default-index="contactType === '1' ? relationshipData.indexOf(form.relationshipFirst) : relationshipData.indexOf(form.relationshipSecond)"
    -->
    <popup v-model="isVisibleChooseRegion" position="bottom">
      <picker v-if="isVisibleChooseRegionP" show-toolbar :title="$t('relationship')" :columns="relationshipList"
        @cancel="isVisibleChooseRegion = false; isVisibleChooseRegionP = false;" @confirm="chooseRegion" />
    </popup>

  </div>
</template>

<script src="./main.js"></script>

<style lang="scss" scoped>
@import "../index";
</style>
